<template>
  <div class="box" v-model="datas">
    <div class="test_title">
      {{datas.exam_title}}
      <span class="times">{{mimute}}:{{second}}</span>
    </div>

    <!-- 试题 -->
    <div class="test" v-for="(item,index) in datas.exam_course">
      <div class="test_top">
        <h4 class="titles">{{index+1}}. {{item.course_title}} &nbsp;&nbsp;&nbsp;&nbsp;{{item.answer}}</h4>
        <!-- <span class="answer">{{item.answer}}</span> -->
      </div>
      <ul class="con_list">
        <li v-for="(content,indes) in item.contents" @click="save(index,content.id)">{{content.id}}.
        {{content.contents}}</li>
      </ul>
    </div>

    <!-- 提交按钮 -->
    <button type="button" class="btn btn-primary btn-lg test_btn" @click="refer">提 交</button>
  </div>
</template>

<script>
  import Vue from 'vue';
  import qs from 'qs';
  export default {
    name: "startExam",
    data: () => {
      return {
        datas: {},
        mimute:0,
        second:0,
        timer:"",
        poortime:""
      }
    },
    created: function() {
      this.start();
      this.setTime();
      window.addEventListener("unload",this.close);
    },
    methods: {
      start: function(e) {
        let that = this;
        console.log(this.$route.query.url);
        Vue.axios.get(this.$store.state.localhost + "getContent?filename=" + this.$route.query.url)
          .then(res => {
            that.datas = res.data.data;
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 保存填写的答案信息
      saveWrite:function(){
        this.axios.post(this.$store.state.localhost + "writeFile",qs.stringify(this.datas),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(res=>{

        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 实时保存考试答案
      save:function(index,id){
          this.datas.exam_course[index].answer = id;
          // 发起请求，，把数据写入文件
          this.saveWrite();
      },
      // 提交试卷，阅卷处理
      refer:function(){
        var testname = this.$route.query.url; //测试题名字
        var id = this.$route.query.id; //测试题名字
        var course = this.$route.query.course; //测试题名字
        var answers = {
          testname:testname,
          datas:this.datas,
          id:id,
          course:course
        }
        this.saveWrite();
        this.axios.post(this.$store.state.localhost + "marking",qs.stringify(answers),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(res=>{
          if(res.data.status){
            this.$router.push("/refer_success");
          }else{
            alert(res.data.info);
          }
        })
        .catch(err=>{
          console.log(err);
        })
      },
      setTime:function(){
        clearInterval(this.timer);
        var that = this;
        this.timer = setInterval(function(){
          var time  = new Date(that.$route.query.time);
          var intime  = that.$route.query.intime;
          time.setHours(time.getHours() + parseInt(intime));
          that.poortime = parseInt((time - new Date())/1000);
          that.mimute = parseInt(that.poortime/(60));
          that.second = that.poortime%60;
          that.second = that.second<10? '0' + that.second:that.second + '';
          if(that.mimute == 0 && that.second < 1){
            that.refer();
            clearInterval(that.timer);
          }
        },1000)
      },
      // 页面关闭执行交卷方法
      close:function(){
        this.refer();
      }
    }
  }
</script>

<style scoped="scoped">
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .box {
    width: 80%;
    min-height: 500px;
    margin: 50px auto;
    border: 1px solid #000;
  }

  .test_title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
  }

  .times {
    float: right;
    margin-right: 10px;
  }

  .test {
    margin-left: 10px;
  }

  .titles {
    font-weight: normal;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
  }
  .test_top{
    width: 100%;
    min-height: 25px;
  }

  .con_list li {
    margin-top: 5px;
    cursor: pointer;
  }

 .test_btn{
    margin: 20px;
    width: 100px;
  }
</style>
